<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>

		<title>Supervisor</title>

		<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
		<link rel="stylesheet" type="text/css" href="/res/css/bootstrap.min.css">

		<script src="/res/js/jquery.min.js"></script>
		<script src="/res/js/jquery.form.min.js"></script>
		<script src="/res/js/bootstrap.min.js"></script>

		<style type="text/css">
			html, body {width: 100%; height: 100%;}
			
			.main {
				height: 100%;
				padding-bottom: -64px;
			}

			.footer {
				position: relative;
				margin-top: -64px;
				height: 64px;
				clear: both;
				background-color: #EEE;
				padding-top: 4px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<nav class="navbar navbar-default">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand">
							<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
							Supervisor&nbsp;&nbsp;
						</a>
					</div>

					<div class="collapse navbar-collapse">
						<ul class="nav navbar-nav">
							<li><a>System process controller for Linux.</a></li>
						</ul>
					</div>
				</div>
			</nav>

			<div class="container">
				<div id="conn-err"></div>

				<div style="margin: 8px">
					<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#mdl-add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;ADD</button>
					<button class="btn btn-default btn-sm" onclick="reload()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;RELOAD</button>
				</div>
				<table class="table table-hover">
					<thead>
						<tr>
							<th>NAME</th>
							<th>STATUS</th>
							<th>CPU(%)</th>
							<th>VERT(KB)</th>
							<th>RSS(KB)</th>
							<th>OPTION</th>
						</tr>
					</thead>
					<tbody id="table-watchers">
						
					</tbody>
				</table>
			</div>
		</div>

		<div class="modal fade" role="dialog" id="mdl-add">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title">ADD WATCHER</h5>
					</div>

					<div class="modal-body">
						<div id="err"></div>

						<form id="form-add" class="form-horizontal" action="/api/add" method="POST">
							<div class="form-group">
								<label for="in-name" class="col-sm-2 control-label">Name</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-name" name="name" placeholder="Unique name of this watcher">
								</div>
							</div>

							<div class="form-group">
								<label for="in-cmd" class="col-sm-2 control-label">Command</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-cmd" name="cmd" placeholder="Command for running this program">
								</div>
							</div>

							<div class="form-group">
								<label for="in-dir" class="col-sm-2 control-label">Directory</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-dir" name="dir" placeholder="Directory, default is /">
								</div>
							</div>

							<div class="form-group">
								<label for="in-retry" class="col-sm-2 control-label">Retries</label>
								<div class="col-sm-10">
									<input type="number" class="form-control" id="in-retry" name="retry" value="0">
								</div>
							</div>
						</form>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="add_watcher()">Add</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" role="dialog" id="mdl-edit">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title">ADD WATCHER</h5>
					</div>

					<div class="modal-body">
						<div id="err"></div>

						<form id="form-edit" class="form-horizontal" action="/api/edit" method="POST">
							<input type="text" id="in-org-name" name="org-name" hidden>

							<div class="form-group">
								<label for="in-name" class="col-sm-2 control-label">Name</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-name" name="name" placeholder="Unique name of this watcher">
								</div>
							</div>

							<div class="form-group">
								<label for="in-cmd" class="col-sm-2 control-label">Command</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-cmd" name="cmd" placeholder="Command for running this program">
								</div>
							</div>

							<div class="form-group">
								<label for="in-dir" class="col-sm-2 control-label">Directory</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="in-dir" name="dir" placeholder="Directory, default is /">
								</div>
							</div>

							<div class="form-group">
								<label for="in-retry" class="col-sm-2 control-label">Retries</label>
								<div class="col-sm-10">
									<input type="number" class="form-control" id="in-retry" name="retry" value="0">
								</div>
							</div>
						</form>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="edit_watcher()">Edit</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" role="dialog" id="mdl-tail">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title">TAIL OF WATCHER</h5>
					</div>

					<div class="modal-body">
						<pre style="height: 40em">
						</pre>
					</div>
				</div>
			</div>
		</div>
	
		<div class="footer">
			<p>Powered by <a href="https://github.com/cesanta/mongoose">Mongoose</a>. Source code can be found at <a href="https://git.oschina.net/love_linger/supervisor">leo/supervisor</a>.</p>
			<p><small><i>Copyright(c) longshuang@msn.cn 2015-2016. All rights reserved.</i></small></p>
		</div>

		<script src="/res/js/supervisor.js"></script>
	</body>
</html>